<template>
  <div>
    <el-row>
      <el-col :span="24">
        <!-- <div style="margin-left: 120px;margin-top: 50px">
          <span style="vertical-align:middle;"><img src="../assets/air_images/fm.png"></span>
          <span style="font-size: 18px">飞机型号：{{
              frs.airlineCompany.airlineModel
            }} &nbsp;&nbsp;&nbsp;&nbsp;起飞时间：{{
              frs.flightLeaveTime.substring(0, 16)
            }}分 &nbsp;&nbsp;&nbsp;&nbsp;航班号：{{ frs.flightNumber }}</span>
        </div> -->
        <div style="margin-left: 120px;margin-top: 10px">
          <span style="vertical-align:middle;"><img src="../assets/air_images/undecidedz.png"></span>
          <span style="font-size: 18px">未选</span>
          <span style="vertical-align:middle;"><img src="../assets/air_images/decidedz.png"></span>
          <span style="font-size: 18px">已选</span>
          <span style="vertical-align:middle;"><img src="../assets/air_images/unavailable.png"></span>
          <span style="font-size: 18px">不可选</span>
        </div>
      </el-col>
    </el-row>

    <div style="margin-top: 50px;margin-left: 100px">
      <img style="z-index: 1;width: 1500px;height: 380px;" src="../assets/air_images/aircraft.png">
      <div style="z-index: 999;margin-top: -360px;margin-left: 300px ">
        <div v-for="(arr,i) in list" :key="i">
            <span v-for="(seat,s) in arr" :key="s">
              <img src="../assets/air_images/undecided.png" alt="" width="32" height="32"
                   v-if=" seat.seatStatus == 0 " @click="show(seat.seatNumber,seat.seatId)">
                <img src="../assets/air_images/decided.png" alt="" width="32" height="32"
                     v-if="seat.seatStatus == 1 " @click="show(seat.seatNumber,seat.seatId)">
              <span v-if="seat == 0" style="padding-left: 16px"></span>
            </span>
        </div>
      </div>
      <!--      <div style="z-index: 999;margin-top: -360px;margin-left: 640px">
              <div v-for="(arr,i) in list" :key="i">
                  <span v-for="(seat,s) in arr" :key="s">
                    <img src="../assets/air_images/undecided.png" alt="" width="32" height="32"
                         v-if="seat != 0 && seat.seatStatus == 0 " @click="show(seat.seatNumber)">
                      <img src="../assets/air_images/decided.png" alt="" width="32" height="32"
                           v-if="seat != 0 && seat.seatStatus == 1 " @click="show(seat.seatNumber)">
                    <span v-if="seat == 0" style="padding-left: 16px"></span>
                  </span>
              </div>
            </div>-->
      <!--      <div style="z-index: 999;margin-top: -360px;margin-left: 1050px">
              <div v-for="(arr,i) in list" :key="i">
                  <span v-for="(seat,s) in arr" :key="s">
                    <img src="../assets/air_images/undecided.png" alt="" width="32" height="32"
                         v-if="seat != 0 && seat.seatStatus == 0 " @click="show(seat.seatNumber)">
                      <img src="../assets/air_images/decided.png" alt="" width="32" height="32"
                           v-if="seat != 0 && seat.seatStatus == 1 " @click="show(seat.seatNumber)">
                    <span v-if="seat == 0" style="padding-left: 16px"></span>
                  </span>
              </div>
            </div>-->
    </div>
  </div>
</template>

<script>


export default {
  name: "ChooseSeat",
  data() {
    return {
      seat: [
        {
          seatId: 1,
          seatImag: require('../assets/air_images/zuowei_1.png')
        },
        {
          seatId: 2,
          seatImag: require('../assets/air_images/zuowei_1.png')
        }
      ],
      list: [],
      ticketDetails: {},
      flightsId: '',
      flightType: '',
      frs: {},
    }
  },
  methods: {
    show(seatNumber, seatId) {
      let operateUsers = null;
      var strcookie = document.cookie;//获取cookie字符串
      var arrcookie = strcookie.split("; ");//分割
      //遍历匹配
      for (var i = 0; i < arrcookie.length; i++) {
        var arr = arrcookie[i].split("=");
        if (arr[0] == 'operateUsers') {
          operateUsers = JSON.parse(arr[1]);
        }
      }
      this.$http.post("http://localhost:1234/airOrder/addAirOrder?operateId=" + operateUsers.operateId + "&cabinsId=" + this.frs.cabinsId + "&airlinesId=" + this.frs.airlinesId + "&flightsId=" + this.flightsId + "&seatId=" + seatId).then(r => {
        this.load();
        if (r.data.status) {
          this.$confirm('购买成功', '提示', {
            confirmButtonText: '确定',
            type: 'success'
          })
        }
        if (this.seat.seatStatus==1){
          if (r.data.status) {
            this.$message({
              message: '这个座位已经选过了哦！！！！',
              type: 'warning'
            });
          }
        }
      });
    },
    findTicketDetails() {
      let operateUsers = null;
      var strcookie = document.cookie;//获取cookie字符串
      var arrcookie = strcookie.split("; ");//分割
      //遍历匹配
      for (var i = 0; i < arrcookie.length; i++) {
        var arr = arrcookie[i].split("=");
        if (arr[0] == 'operateUsers') {
          operateUsers = JSON.parse(arr[1]);
        }
      }

      this.$http.get("http://localhost:1234/ticketDetails/findTicketDetails?operateId=" + operateUsers.operateId).then(res => {
        this.ticketDetails = res.data.ticketDetails;
        this.flightsId = this.ticketDetails.flightsId;
        console.log(this.flightsId);
        console.log(this.ticketDetails);
        this.load();

      })

    },
    load() {
      let operateUsers = null;
      var strcookie = document.cookie;//获取cookie字符串
      var arrcookie = strcookie.split("; ");//分割
      //遍历匹配
      for (var i = 0; i < arrcookie.length; i++) {
        var arr = arrcookie[i].split("=");
        if (arr[0] == 'operateUsers') {
          operateUsers = JSON.parse(arr[1]);
        }
      }

      this.$http.get("http://localhost:1234/airSeat/findAirSeat?operateId=" + operateUsers.operateId + "&flightsId=" + this.flightsId).then(r => {
        console.log(r.data);
        this.list = r.data;
      });

      this.$http.get("http://localhost:1234/records/findFlightRecordsByIdFlightRecords?flightId=" + this.flightsId).then(r => {
        this.frs = r.data.frs;
        console.log(this.frs);
      });
    }
  },
  mounted() {

  },
  created() {
    this.findTicketDetails();
  }
}
</script>
<style scoped>
.seat {
  background: url("../assets/air_images/aircraft.png") no-repeat;
  background-size: 2223px;
}
</style>
